import { fabric } from 'fabric'
import { useEffect, useRef } from 'react'

export default function View() {
  const canvasRef = useRef(null)

  // 创建矩形元素
  const rect = new fabric.Rect({
    top: 20,
    left: 20,
    width: 60,
    height: 60,
    fill: '#aa96da'
  })

  useEffect(() => {
    // 使用 fabric 绑定画布
    const canvas = new fabric.Canvas(canvasRef.current)
    // 将矩形添加到画布中
    canvas.add(rect)
  }, [])

  return (
    <div className='view-wrapper'>
      <canvas
        ref={canvasRef}
        width='500'
        height='500'
        style={{ border: '1px solid #ccc', boxSizing: 'border-box' }}
      ></canvas>
    </div>
  )
}
